<template>
    <div class="main">
        <div class="data">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
                <el-radio-button label="1">日榜</el-radio-button>
                <el-radio-button label="2">周榜</el-radio-button>
            </el-radio-group>
            <div class="block">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                </el-date-picker>
            </div>

            <div class="search">
                <span>视频搜索</span>
                <el-input
                        placeholder="请输入商品名称"
                        v-model="input3"
                        class="input-with-select"
                >
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>


        </div>
        <p slot="reference" style="font-size: 14px">
            该数据仅供参考
            数据更新时间:
            2022-09-30 00:00
        </p>
        <div class="btn">
            <button class="btn1"><i class="el-icon-download"></i>导出</button>
        </div>
        <hr style="height: 1px; border: none; border-top: 1px dashed #ececec"/>
        <div class="cate">
            <span>商品来源</span>
            <el-radio-group v-model="radio2" size="small">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="淘宝"></el-radio-button>
                <el-radio-button label="小店"></el-radio-button>
            </el-radio-group>
        </div>
        <div class="cate">
            <span>所属分类</span>
            <el-radio-group v-model="radio2" size="small">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="家居建材"></el-radio-button>
                <el-radio-button label="家用家电"></el-radio-button>
                <el-radio-button label="美妆个护"></el-radio-button>
                <el-radio-button label="时尚配饰"></el-radio-button>
                <el-radio-button label="潮流男鞋"></el-radio-button>
                <el-radio-button label="精品女装"></el-radio-button>
                <el-radio-button label="居家内衣"></el-radio-button>
                <el-radio-button label="图书教育"></el-radio-button>
                <el-radio-button label="宠物用品"></el-radio-button>
                <el-radio-button label="食品酒饮"></el-radio-button>
                <el-radio-button label="母婴用品"></el-radio-button>
                <el-radio-button label="运动户外"></el-radio-button>
                <el-radio-button label="鞋靴箱包"></el-radio-button>
                <el-radio-button label="汽车用品"></el-radio-button>
                <el-radio-button label="手机数码"></el-radio-button>
                <el-radio-button label="其他好货"></el-radio-button>
            </el-radio-group>
        </div>
        <div class="cate">
            <span>佣金比例</span>
            <div class="commission-rate">
                <el-select v-model="value" placeholder="观看人数筛选">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>


            <span>价格区间</span>
            <div class="commission-rate">
                <el-select v-model="value" placeholder="观看人数筛选">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>


            <span>优惠券</span>
            <div class="commission-rate">
                <el-select v-model="value" placeholder="观看人数筛选">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="cate">
            <span>观众画像：性别</span>
            <div class="commission-rate">
                <el-select v-model="value" placeholder="观看人数筛选">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>


            <span>年龄</span>
            <div class="commission-rate">
                <el-select v-model="value" placeholder="观看人数筛选">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>


            <span>地域</span>
            <div class="commission-rate">
                <el-select v-model="value" placeholder="观看人数筛选">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
        </div>
        <button>清空条件</button>
        <hr style="height: 1px; border: none; border-top: 1px dashed #ececec"/>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="top" label="推荐度"></el-table-column>
                <el-table-column prop="date" label="商品" width="430"></el-table-column>
                <el-table-column prop="province" label="关联视频数"></el-table-column>
                <el-table-column prop="city" label="关联直播数"></el-table-column>
                <el-table-column prop="address" label="全网销量增量"></el-table-column>
                <el-table-column prop="address" label="全网销量" ></el-table-column>
                <el-table-column prop="gold" label="佣金比例"></el-table-column>

                <el-table-column fixed="right" label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                type="text"
                                size="small"
                        >
                            商品详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: "0",

                tabPosition: "1",
                value1: "",
                input3: "",
                radio2: "全部",
                options: [
                    {
                        value: "<1000",
                        label: "<1000",
                    },
                    {
                        value: "1000-5000",
                        label: "1000-5000",
                    },
                    {
                        value: "5000-1W",
                        label: "5000-1W",
                    },
                    {
                        value: "1W-5W",
                        label: "1W-5W",
                    },
                    {
                        value: ">5W",
                        label: ">5W",
                    },
                ],
                tableData: [
                    {
                        top: "1",
                        date: "【主播宠粉】9.9到手150只 抽绳式垃圾袋 自动收口加厚厚垃圾袋",
                        province: "--",
                        city: "103.6w",
                        address: "1588.5w",
                        gold:"10.00%"
                    },
                    {
                        top: "2",
                        date: "80抽大包一包一斤多）婴儿湿巾纸手口屁专用湿纸巾",

                        province: "76545",
                        city: "4651221",
                        address: "90w",
                        address1: "621w",
                        gold:"10.00%"
                    },
                    {
                        top: "3",
                        date: "抽绳式垃圾袋 性纸杯加厚加硬杯子",
                        province: "745851",
                        city: "7984654",
                        address: "134w",
                        address1: "21w",
                        gold:"10.00%"
                    },
                    {
                        top: "4",
                        date: "一次性纸杯加厚加次性防护口罩 防尘防飞沫 含熔喷布杯子",
                        province: "84641",
                        city: "616546",
                        address: "13w",
                        address1: "96w",
                        zip: 200333,
                        gold:"12.00%"
                    },
                    {
                        top: "5",
                        date: "次性防护口罩 防尘防飞沫 含熔喷布",
                        province: "146543",
                        city: "874651",
                        address: "134w",
                        address1: "61w",
                        gold:"10.00%"
                    },
                    {
                        top: "6",
                        date: "含熔喷布杯子宠粉】厚厚垃圾袋0只纸杯子",

                        province: "45131",
                        city: "9876514",
                        address: "1w",
                        address1: "6w",
                        gold:"10.00%"
                    },
                    {
                        top: "7",
                        date: "厚厚垃圾袋加厚加硬招财猫210ml共120只纸杯子",

                        province: "46543",
                        city: "78465",
                        address: "134w",
                        address1: "61w",
                        gold:"16.00%"
                    },
                ],
                value: "",
                title: "直播销量榜",
            };
        },
        methods: {
            handleClick(tab) {
                let ind = tab.index;
                if (ind == 0) {
                    this.title = "直播销量榜";
                }
                if (ind == 1) {
                    this.title = "直播销售额榜";
                }
                if (ind == 2) {
                    this.title = "直播获赞榜";
                }
                if (ind == 3) {
                    this.title = "观看人次榜";
                }
                if (ind == 4) {
                    this.title = "直播涨粉榜";
                }
            },
        },
    };
</script>

<style lang="less" scoped>
    .main :deep(.is-active) {
        color: #506eff;
    }

    .main :deep(.el-tabs__active-bar) {
        background-color: #506eff;
    }

    .table {
        margin-top: 15px;
    }

    .data {
        width: 750px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 10px;
        border-left: 4px solid #506eff;

        .el-radio-group {
            margin-bottom: 0 !important;
        }

        :deep(.el-radio-button__inner) {
            padding: 9px 15px;
        }

        :deep(.el-input__inner) {
            height: 35px !important;
        }
    }

    .search {
        width: 650px;
        display: flex;
        align-items: center;
        margin-top: 30px;
        margin-bottom: 15px;

        span {
            width: 102px;
            color: #303133;
            font-weight: 700;
            font-size: 14px;
            margin-right: 20px;
        }
    }

    .cate {
        width: 1538px;
        display: flex;
        align-items: center;

        :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
            background-color: #506eff;
            display: inline-block;
            height: 32px;
            line-height: 32px;
            margin: 0 12px 6px 0;
            border-radius: 8px;
            padding: 0 6px;
            cursor: pointer;
        }

        span {
            width: 102px;
            color: #303133;
            font-weight: 700;
            font-size: 14px;
        }

        :deep(.el-radio-button--small .el-radio-button__inner) {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            margin: 0 12px 6px 0;
            border-radius: 8px;
            padding: 0 6px;
            cursor: pointer;
            border: 0;
            font-size: 14px;
        }

        :deep(.el-radio-button--small .el-radio-button__inner):hover {
            background-color: #506eff;
            color: #fff;
        }
    }

    .cate1 {
        width: 93%;
        display: flex;
        align-items: center;

        :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
            background-color: #506eff;
            display: inline-block;
            height: 32px;
            line-height: 32px;
            margin: 0 12px 6px 0;
            border-radius: 8px;
            padding: 0 6px;
            cursor: pointer;
        }

        span {
            width: 7%;
            color: #303133;
            font-weight: 700;
            font-size: 14px;
        }

        :deep(.el-radio-button--small .el-radio-button__inner) {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            margin: 0 12px 6px 0;
            border-radius: 8px;
            padding: 0 6px;
            cursor: pointer;
            border: 0;
            font-size: 14px;
        }

        :deep(.el-radio-button--small .el-radio-button__inner):hover {
            background-color: #506eff;
            color: #fff;
        }
    }

    .sel {
        width: 607px;
        margin-bottom: 15px;

        :deep(.el-input__inner) {
            width: 400px;
        }
    }

    .table {
        color: black;

        :deep(.el-table thead) {
            color: black;
        }
    }
</style>